---
title: Popover
description: Popovers are perfect for floating panels with arbitrary content like navigation menus, mobile menus and flyout menus.
author:
  name: imskyleen
  url: https://github.com/imskyleen
---

<ComponentPreview name="demo-components-headless-popover" />

## Installation

<ComponentInstallation name="components-headless-popover" />

## Usage

```tsx
<Popover>
  <PopoverTrigger>Open Popover</PopoverTrigger>
  <PopoverContent>
    <div>Popover Content</div>
  </PopoverContent>
</Popover>
```

## API Reference

### Popover

<div className="flex flex-col gap-2">
<ExternalLink
  href="https://animate-ui.com/docs/primitives/headless/popover#popover"
  text="Animate UI API Reference - Popover Primitive"
/>

<ExternalLink
  href="https://headlessui.com/react/popover#popover"
  text="Headless UI API Reference - Popover"
/>
</div>

### PopoverButton

<div className="flex flex-col gap-2">
<ExternalLink
  href="https://animate-ui.com/docs/primitives/headless/popover#popoverbutton"
  text="Animate UI API Reference - PopoverButton Primitive"
/>

<ExternalLink
  href="https://headlessui.com/react/popover#popover-button"
  text="Headless UI API Reference - PopoverButton"
/>
</div>

### PopoverBackdrop

<div className="flex flex-col gap-2">
<ExternalLink
  href="https://animate-ui.com/docs/primitives/headless/popover#popoverbackdrop"
  text="Animate UI API Reference - PopoverBackdrop Primitive"
/>

<ExternalLink
  href="https://headlessui.com/react/popover#popover-backdrop"
  text="Headless UI API Reference - PopoverBackdrop"
/>
</div>

### PopoverGroup

<div className="flex flex-col gap-2">
<ExternalLink
  href="https://animate-ui.com/docs/primitives/headless/popover#popovergroup"
  text="Animate UI API Reference - PopoverGroup Primitive"
/>

<ExternalLink
  href="https://headlessui.com/react/popover#popover-group"
  text="Headless UI API Reference - PopoverGroup"
/>
</div>

### PopoverPanel

<div className="flex flex-col gap-2">
<ExternalLink
  href="https://animate-ui.com/docs/primitives/headless/popover#popoverpanel"
  text="Animate UI API Reference - PopoverPanel Primitive"
/>

<ExternalLink
  href="https://headlessui.com/react/popover#popover-panel"
  text="Headless UI API Reference - PopoverPanel"
/>
</div>

<TypeTable
  type={{
    transition: {
      description: 'The transition of the popover panel.',
      type: 'Transition',
      required: false,
      default: "{ type: 'spring', stiffness: 300, damping: 25 }",
    },
    '...props': {
      description: 'The props of the popover panel.',
      type: 'HTMLMotionProps<"div">',
      required: false,
    },
  }}
/>

## Credits

- [Headless Popover](https://headlessui.com/react/popover)
- Credit to [shadcn/ui](https://ui.shadcn.com/docs/components/popover) for style inspiration.
